import 'react-app-polyfill/ie11'

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


// antd组件库
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN.js'
import './index.less';

/* REDUX */
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  // 汉化
  <ConfigProvider locale={zhCN}>
    <Provider store={store}>
      <App />
    </Provider>
    
  </ConfigProvider>
);



// 1.函数组件的使用
// root.render(
//// import FunctionComponent from './views/DemoOne';
//   <div >
//     双闭合调用子组件
//     <FunctionComponent className="demo-farther" x={10} title="你好世界" arr={[10, 20, 30]}>
//       <div className='slot-box'>
//         我是插槽信息
//       </div>
//       <div slot='head'>111</div>
//       <div slot='foot'>222</div>
//     </FunctionComponent>
//     <p>=========================================</p>
//     单闭合调用
//     <FunctionComponent className="demo-farther"  title="单闭合"  />
//   </div>

/////////////////////////////////////////
// 2.基础组件的使用
// import Dialog from './components/Dialog';
{/* <div >
<Dialog title='友情提示' content="天干物燥，小心火烛！" />
<Dialog content='好好学react'>
  <button>确定</button>
  <button>取消</button>
</Dialog>
</div> */}
// );

/////////////////////////////////////
// 3.生命周期
// import Vote from './views/Vote';
// let num=0
// root.render(
//   <div >
//     <Vote title="动态组件" num={num}>111 <span>22</span> </Vote>
//     {/* <Vote num="测试PropTypes"> <span>PropTypes</span></Vote> */}
//   </div>
// );
// setTimeout(()=>{
//   num=100
//   root.render(
//     <div >
//       <Vote title="我是五秒后的" num={num}>111 <span>22</span> </Vote>
//       {/* <Vote num="测试PropTypes"> <span>PropTypes</span></Vote> */}
//     </div>
//   );
//   // console.log(num);
// },5000)

// 4.类组件更新原理
// import Demo2 from './views/Demo2';
// <Demo2 />

// 5.函数组件和类组件中ref的使用
// import DemoRef from './views/Demo3Ref';
//  <DemoRef />

// 6.Task
// import Task from './views/Task.jsx'
// <Task />

// 7.useState
// import Vote from './views/Vote';
// <Vote title="useState"></Vote>
// import Demo4 from './views/Demo4SetState';
// <Demo4 />

// 8.useEffect和useLayoutEffect
// import DemoUseEffect from './views/Demo5useEffect';
//  <DemoUseEffect />

// 9.useRef
//  <DemoUseRef />
// import DemoUseRef from './views/Demo7UseRef';

// 10.重构Task
// import Task from './views/Task2.jsx'
//  <Task />

// 11.FlushSync
// import DemoFlushSync from './views/Demo8FlushSync';
// <DemoFlushSync />

// 12.useMemo && useCallback
// import DomouseMemo from './views/Domo9useMemo';
// import DemouseCallback from './views/Demo10useCallback';
// <DomouseMemo />
// <DemouseCallback />

// 13.组件传值prop
// import VoteProps from './views/props/Vote.jsx'
// <VoteProps />

// 14.组件传值context
// import VoteContext from './views/context/Vote.jsx'
// <VoteContext />

// 15.redux
// import ThemeContext from './views/15redux/ThemeContext';
// import Vote from './views/15redux/Vote';
// import  store  from './store/index';
// root.render(
//   // 汉化
//   <ConfigProvider locale={zhCN}>
//    <ThemeContext.Provider value={store}>
// {/* <ThemeContext.Provider > */}
//   <Vote />
// </ThemeContext.Provider>
//   </ConfigProvider>
// );

// 16.router
// import App from './App';
// <App />